Data is more powerful when we share it with others! Let’s take what we’ve learned about HTML and CSS to create a dashboard showing off the analysis we’ve done.
Images/landingResize.png
Create a new repository for this project called Web-Design-Challenge. Do not add this homework to an existing repository.
Clone the new repository to your computer.
Inside your local git repository, create a directory for the web challenge. Use a folder name to correspond to the challenge: WebVisualizations.
Add your html files to this folder as well as your assets, Resources and visualizations folders.
Push the above changes to GitHub or GitLab.
Deploy to GitHub pages.
For this homework we’ll be creating a visualization dashboard website using visualizations we’ve created in a past assignment. Specifically, we’ll be plotting weather data.
In building this dashboard, we’ll create individual pages for each plot and a means by which we can navigate between them. These pages will contain the visualizations and their corresponding explanations. We’ll also have a landing page, a page where we can see a comparison of all of the plots, and another page where we can view the data used to build them.
For reference, see the “Screenshots” section below.
The website must consist of 7 pages total, including:
.csv file as HTML, or converting it to HTML. Try using a tool you already know, pandas. Pandas has a nifty method approprately called to_html that allows you to generate a HTML table from a pandas dataframe. See the documentation hereThe website must, at the top of every page, have a navigation menu that:
Finally, the website must be deployed to GitHub pages.
When finished, submit to BootcampSpot the links to 1) the deployed app and 2) the GitHub repository.
navbar component for the header on every page, the bootstrap table component for the data page, and the bootstrap grid for responsiveness on the comparison page.This section contains screenshots of each page that must be built, at varying screen widths. These are a guide; you can meet the requirements without having the pages look exactly like the below images.
Large screen:
Small screen: 
Large screen:
Small screen:
Large screen:
Small screen:
You’ll build four of these, one for each visualization. Here’s an example of one:
Large screen:
Small screen:
Trilogy Education Services © 2019. All Rights Reserved.